<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/bootstrap.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/public/foundation-datepicker.min.css" type="text/css">
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/personnal-information.css"/>
    <link rel="stylesheet" href="${ctx}/static/h5/css/personal/time-zhou.css"/>
    <title></title>
</head>
<body>
<div id="personnalInfo">
    <input hidden="hidden" value="${person.user.id}" class="userId">
    <header>
        <a href="javascript:;" onclick="window.history.back()">
            <img src="${ctx}/static/h5/images/back.png" class="go-back" alt=""/></a>
        <h5>个人信息</h5>
        <button class="btn btn-success" id="editSave">保存</button>
    </header>
    <section class="settings-contnet">
        <ul>
            <li>
                <a href="javascript:;">
                    <input type="file" class="head-file" id="head-file"/>
                    <span>头像</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <div class="upload_img">
                        <c:if test="${person.avatar==''}">
                            <img src="${ctx}/static/h5/images/headadd.png" class="onlaod-head" alt=""/>
                        </c:if>
                        <c:if test="${person.avatar!=''}">
                            <img src="${person.avatar}" class="onlaod-head" alt=""/>
                        </c:if>
                    </div>
                </a>
            </li>
            <li class="settings-contnet-li">
                <a href="javascript:;">
                    <span>昵称</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <c:if test="${empty person.user}">
                        <span class="nickname">${person.mobile}</span>
                    </c:if>
                    <c:if test="${!empty person}">
                        <span class="nickname">${person.name}</span>
                    </c:if>

                </a>
            </li>
            <li>
                <a href="javascript:;" class="choose-sex">
                    <span>性别</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <c:if test="${person.s=='M'}">
                        <span class="sex">男</span>
                    </c:if>
                    <c:if test="${person.s=='F'}">
                        <span class="sex">女</span>
                    </c:if>
                </a>
            </li>
            <li class="settings-contnet-li">
                <a href="javascript:;">
                    <span>手机号</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <span class="tel">${person.mobile}</span>
                </a>
            </li>
            <li style="margin-top: 10px" class="settings-contnet-li">
                <a href="javascript:;">
                    <span>二维码</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                </a>
            </li>
            <li class="settings-contnet-li">
                <a href="javascript:;">
                    <span>生日</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <span class="brithday-show">${person.bornTime}</span>
                </a>
            </li>
            <li class="settings-contnet-li">
                <a href="javascript:;">
                    <span>祖籍</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <span class="zhuji-show">${person.ancestralHome}</span>
                </a>
            </li>
            <li class="settings-contnet-li">
                <a href="javascript:;">
                    <span>地址</span>
                    <img src="${ctx}/static/h5/images/tiaozhuan.png" class="tiaozhuan" alt=""/>
                    <span class="address-show">${person.bornAddress} </span>
                </a>
            </li>
        </ul>

    </section>
</div>

<!--更改昵称-->
<div class="name-edit shows">
    <div class="name-edit-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/></a>
        <p>修改昵称</p>
        <button class="btn change-nick">完成</button>
    </div>
    <div class="name-edit-input">
        <input type="text"/>
    </div>
</div>
<!--选择性别-->
<div class="shows">
    <div id="zhezhaoceng"></div>
    <div id="close">
        <div id="male">男</div>
        <div id="famale">女</div>
    </div>
</div>

<!--更改手机号-->
<div class="change-tel shows">
    <div class="change-tel-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/></a>
        <p>修改手机号码</p>
        <button class="btn">完成</button>
    </div>
    <div class="change-tel-input">
        <input type="text"/>
    </div>
</div>

<!--二维码-->
<div class="qr_code shows">
    <div class="member-application-head">
        <a href="javascript:;" class="go-backk">
            <i class="fa fa-angle-left" aria-hidden="true"></i>
            <span>返回</span>
        </a>
        <h4>我的二维码</h4>
    </div>
    <div class="code_mask"></div>
    <!--生成二维码区域-->
    <div class="code_box">

        <img src="${ctx}/static/h5/images/share_weibo.png"/>
        <div id="code"></div>
        <p>扫一扫上面的二维码图案</p>

    </div>
</div>
<!--生日-->
<div class="brithday shows">
    <div class="brithday-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/></a>
        <p>请选择日期</p>
        <button class="btn">完成</button>
    </div>
    <div class="brithday-input">
        <input type="text"  placeholder="选择出生时间" id="birthdayTime">
    </div>
</div>

<!--祖籍-->
<div class="zhuji shows">
    <div class="zhuji-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/></a>
        <p>选择地区</p>
        <button class="btn">完成</button>
    </div>
    <div class="zhuji-input">
        <div id="city_1">
        </div>
    </div>
</div>

<!--住址-->
<div class="address shows">
    <div class="address-head">
        <a href="#"><img src="${ctx}/static/h5/images/back.png" class="go-backk" alt=""/></a>
        <p>选择地区</p>
        <button class="btn">完成</button>
    </div>
    <div class="address-input">
        <div id="city_2">
        </div>
    </div>
</div>
</body>
<script src="${ctx}/static/h5/js/public/jquery-2.2.3.min.js"></script>
<script src="${ctx}/static/h5/js/public/jquery.qrcode.min.js"></script>
<script src="${ctx}/static/h5/js/public/jquery.provincesCity.js"></script>
<script src="${ctx}/static/h5/js/public/provincesdata.js"></script>
<script src="${ctx}/static/h5/js/public/bootstrap.min.js"></script>
<script src="${ctx}/static/h5/js/public/foundation-datepicker.min.js"></script>
<script src="${ctx}/static/h5/js/public/foundation-datepicker.zh-CN.js"></script>
<script src="${ctx}/static/h5/js/personal/personnal-information.js"></script>
<script>
    $(document).ready(function(){
        //    初始化地址
        $("#city_1").ProvinceCity();
        $("#city_2").ProvinceCity();
    })
</script>
<script>
//初始化日期
    $('#birthdayTime').fdatepicker({
        language: 'zh-CN',
        format: 'yyyy-mm-dd'
    });

    var nowTemp = new Date();
    var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
    var checkin = $('#dpd1').fdatepicker({
        onRender: function (date) {
            return date.valueOf() < now.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        if (ev.date.valueOf() > checkout.date.valueOf()) {
            var newDate = new Date(ev.date);
            newDate.setDate(newDate.getDate() + 1);
            checkout.update(newDate);
        }
        checkin.hide();
        $('#dpd2')[0].focus();
    }).data('datepicker');
    var checkout = $('#dpd2').fdatepicker({
        onRender: function (date) {
            return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
        }
    }).on('changeDate', function (ev) {
        checkout.hide();
    }).data('datepicker');
</script>
</html>